<template>
  <Modal>
    <Tree
      v-model:checked-keys="checkedKeys"
      v-model:expanded-keys="expandedKeys"
      :tree-data="treeMenuData"
      check-strictly
      checkable
      default-expand-all
    />
  </Modal>
</template>
<script lang="ts" setup>
import type { DataNode } from 'ant-design-vue/es/vc-tree/interface';

import { ref } from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';

import { message, Tree } from 'ant-design-vue';

import {
  createOrUpdateMenuAuthority,
  getMenuAuthority,
} from '#/api/sys/authority';
import { getMenuList } from '#/api/sys/menu';
import { buildDataNode } from '#/utils/tree';

defineOptions({
  name: 'MenuAuthorityModal',
});

const treeMenuData = ref<DataNode[]>([]);

const checkedKeys = ref();
const expandedKeys = ref();
const roleId = ref<number>();

const [Modal, modalApi] = useVbenModal({
  fullscreenButton: false,
  onCancel() {
    modalApi.close();
  },
  onConfirm: async () => {
    if (checkedKeys.value.checked !== undefined) {
      const result = await createOrUpdateMenuAuthority({
        roleId: roleId.value as number,
        menuIds: checkedKeys.value.checked,
      });
      if (result.code === 0) {
        message.success($t('common.successful'));
      }
    }
    modalApi.close();
  },
  onOpenChange(isOpen: boolean) {
    roleId.value = isOpen ? modalApi.getData()?.roleId || {} : {};
    if (isOpen) {
      getMenuData(roleId.value as number);
    }
  },
  title: $t('sys.authority.menuAuthority'),
});

async function getMenuData(roleId: number) {
  try {
    treeMenuData.value = [];
    const data = await getMenuList();
    treeMenuData.value = buildDataNode(data.data.data, {
      idKeyField: 'id',
      parentKeyField: 'parentId',
      childrenKeyField: 'children',
      valueField: 'id',
      labelField: 'trans',
    });

    const checkedData = await getMenuAuthority({ id: roleId });
    checkedKeys.value = checkedData.data.menuIds;
    expandedKeys.value = data.data.data.map((val, _idx, _arr) => val.id);
  } catch {
    // console.log(error);
  }
}

defineExpose(modalApi);
</script>
